<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="/static/css/metro-all.min.css">
	<link rel="stylesheet" href="/static/css/schemes/darcula.min.css">
</head>
<body class="bg-dack m-0 p-2">
	<!--  -->
	<header class="grid">
		<div class="row mt-10">
			<div class="cell-12">
				<h4>用户添加</h4>
			</div>
		</div>
	</header>
	<!--  -->
	<section>
		<article class="grid text-left">
		<form data-role="validator" action="javascript:" data-on-validate-form="_submitForm" >
		<div class="row">
			<div class="cell-12">
				<input type="hidden" name="id" id="id">
				<select data-role="select" id="usergroup" name="group" data-validate="required" data-on-down="updateSelect">
				</select>
				<span class="invalid_feedback text-left">
				必须选择
				</span>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<input type="text" data-role="input" placeholder="姓名" name="monicker" id="monicker"
					data-prepend="<span class='mif-bookmark'></span>"
					data-clear-button="false"
					data-validate="required minlength=2 maxlength=24">
				<span class="invalid_feedback text-left">
				必填 5到24个字符
				</span>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<input type="text" data-role="input" placeholder="电话" name="tele"  id="tele"
					data-prepend="<span class='mif-mobile'></span>"
					data-clear-button="false"
					data-validate="required minlength=2 maxlength=24">
				<span class="invalid_feedback text-left">
				必填 5到24个字符
				</span>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<input type="text" data-role="input" placeholder="邮件" name="addres" id="address"
					data-prepend="<span class='mif-mail'></span>"
					data-clear-button="false"
					data-validate="required minlength=2 maxlength=24">
				<span class="invalid_feedback text-left">
				必填 5到24个字符
				</span>
			</div>
		</div>

		<div class="row mt-2">
			<div class="cell-12">
				<div class="border border-size-1" style="border-color:#585b5d;">
					<span class='mif-eye mr-2' style="display:block; float:left;background-color:#585b5d;padding:6px 12px 7px 12px;"></span>
					<input type="radio" name="ban" data-role="radio" value="0" data-validate="required" data-caption="启用登录">
					<input type="radio" name="ban" data-role="radio" value="1" data-validate="required" data-caption="禁用登录">
					<span class="invalid_feedback">状态不能为空</span>
				</div>
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-12">
				<textarea data-role="textarea" data-auto-size="false"  placeholder="对新用户进行一定的描述" data-prepend="<span class='mif-leanpub'></span>" data-chars-counter="#chars-counter" data-chars-counter-template="您已经输入了 $1 个字符" data-validate="required minlength=2 maxlength=255" style="height:96px;outline:none;" id="introduce" name="introduce"></textarea>
				<span class="invalid_feedback text-left">
				必填 2到255个字符
				</span>
				<p id="chars-counter"></p>
				
			</div>
		</div>
		<div class="row mt-2">
			<div class="cell-6">
				<button class="button w-100">确认</button>
			</div>
			<div class="cell-6">
				<button class="button w-100" id="click">删除</button>
			</div>
		</div>
		</form>
		</article>
	</section>
	<!--  -->
	<footer class="grid text-center">
		
	</footer>
</body>
<foot>
	<script src="/static/js/jquery-3.3.1.min.js"></script>
	<script src="/static/js/metro.js"></script>
	<script>
	function getDetails()
	{
		list = Metro.storage.getItem('user_detauls');
		console.log(list);
		Metro.toast.create('获取中', function()
		{
			$('#id').val(list.id); 
			$('#monicker').val(list.name); 
			$('#tele').val(list.phone);
			$('#address').val(list.email);
			if ("1"== list.status) $("input[value='1']").attr('checked','true');
			else $("input[value='0']").attr('checked','true');
			$('#introduce').val(list.note);
			$('#click').attr('onclick','delRules('+list.id+')');
			usergroupshow(list.group_id)
		},1000);
	}

	getDetails();


	function usergroupshow(group_id)
	{
		var url = 'http://192.168.0.101/admin/admin_user/userGroup.html';
		$.post(url,'',function(res)
		{
			if (0 === res.code)
			{
				var select = $("#usergroup").data("select");
				data = selectAccsee(res.data,group_id);
				select.data(data);
			}
			else
			{
				var select = $("#usergroup").data("select")
				select.data('<option value="0">管理员列表</option>');
			}
		});
	}
	
	function selectAccsee(select,group_id)
	{
		var str = '<option value="0">管理员列表</option>';
		for(var key in select)
		{
			if (key == group_id) str += '<option selected="selected value="'+key+'">'+select[key]+'</option>';
			else str += '<option value="'+key+'">'+select[key]+'</option>';
		}
		return str;
	}

	function _submitForm()
	{
		var url = 'http://192.168.0.101/admin/admin_user/editUser.html';
		var data = $("form").serializeArray();
		console.log(data);
		$.post(url,data,function(res)
		{
			if (0 === res.code) Metro.toast.create('修改成功',null,3000);
			else Metro.toast.create('修改失败', null,3000);
		});
	}
	</script>
</foot>
</html>

